<template>
<div>
  <ul>
    <li v-for="(item,index) in newList" :key="index">
      <router-link :to="{path:'singerList',query:{tinguid:item.ting_uid}}"><img  :src="item.avatar_big" alt="" />
        <span>{{item.name}}</span></router-link>
    </li>
  </ul>
</div>
</template>

<script>
// import {getSongList} from "@/api/api";

import {getSinger} from "@/api/api";

export default {
name: "singer",
  data(){
    return {

      newList:[],
      list:[{
        id:'2517',
        name:'薛之谦'
      },{
        id:'7994',
        name:'周杰伦'
      },{
        id:'45561',
        name:'王菲'
      },{
        id:'1077',
        name:'陈奕迅'
      },{
        id:'1204',
        name:'许茹芸'
      },{
        id:'1117',
        name:'齐秦'
      },{
        id:'82366',
        name:'杨丞琳'
      },]
    }
},
  created(){
  //   getSongList(this.type=1,this.size=10,this.method=0).then(res=>{
  //     console.log(res)
  //     this.list = res.song_list
  // })
    for(var i= 0;i<this.list.length;i++){
      getSinger(this.limits=1,this.tinguid=this.list[i].id).then(res=>{
        console.log(res)
        this.newList.push(res.artistinfo)
      })
    }
    console.log(this.newList)

}
}
</script>

<style scoped lang="less">
ul{
  height: calc(100% - 60px);
  overflow: scroll;
  li{
    //height: 40px;
    padding: 10px;
    border-bottom: 2px solid #ccc;
    img{
      width: 30%;
      height: 50%;
      vertical-align: middle;
    }
    span{
      width: 50%;
      height: 10%;
      margin-left: 20px;
    }
  }
}

</style>